<template>
  <div>
    <!-- <div class="FHimg">
      <img src="@/assets/fanhui.png" width="40px" height="40px">
    </div> -->
    <van-nav-bar title="扫描" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="engcode">
      <div class="font">单号：</div>
      <textarea type="text" ref="gcdInputVal" class="tatile_style" @keypress="codeWhow" v-model="gdbh"
        @focus="upco($event)" @blur="upco($event)"></textarea>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import router from "@/router";
export default {
  name: "EngCode",
  setup() {
    const onClickLeft = () => { router.push("/");};
    const gdbh = ref("")
    const codeWhow = (e) => {
      if (e.keyCode == 13) {
        if (!gdbh.value) {
          console.log("ddd", e)
        }
      }
    }
    const upco = (event) => {
      switch (event.type) {
        case "focus":
          event.target.style.backgroundColor = 'white'
          break
        case "blur":
          event.target.style.backgroundColor = "#eeeeee"
          break
        default:
          break
      }
    }
    return {
      gdbh,
      codeWhow,
      upco,
      onClickLeft
    }
  }
}
</script>
<style>
.engcode {
  display: flex;
}
.FHimg{
  text-align: left;
  padding:10px 0 0 10px;

}
.font {
  text-align: lert;
  font-size: 40px;
  /* font-family: "Lucida Calligraphy", cursive, serif, sans-serif; */
  font-weight: bold;
  color: white;
  padding-left: 10px;
  height: 50px;
  padding-top: 20px;
  /* margin: 20px 10px; */
}

.tatile_style {
  background-color: #EEEEEE;
  resize: none;
  width: 400px;
  height: 50px;
  margin-left: 10px;
  margin-top: 20px;
  font-size: 30px;
  line-height: 50px;
}

#app {
  position: relative;
}

.engcode {
  position: absolute;
  left: 25%;
  top: 35%;
}</style>